{% extends '__base_local__.html' %}

{% block title %}注册{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <div class="card col-md-8">
            <div class="card-header">
                注册
            </div>
            <div class="card-body">
                <form class="needs-validation" novalidate method="POST" action="register">
                    <div class="form-group row">
                        <label for="inputName" class="col-sm-2 offset-sm-1 col-form-label">昵称</label>
                        <div class="col-sm-9">
                            <input type="name" name="name" class="form-control" id="inputName" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputEmail" class="col-sm-2 offset-sm-1 col-form-label">邮箱</label>
                        <div class="col-sm-9">
                            <input type="email" name="email" class="form-control" id="inputEmail" required>
                            <div class="invalid-feedback">
                                邮箱已注册
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputPassword" class="col-sm-2 offset-sm-1 col-form-label">密码</label>
                        <div class="col-sm-9">
                            <input type="password" name="password" class="form-control" id="inputPassword" required>
                        </div>
                    </div>
                    <div class="form-group row">
                        <label for="inputPassword1" class="col-sm-2 offset-sm-1 col-form-label">确认密码</label>
                        <div class="col-sm-9">
                            <input type="password" name="password1" class="form-control" id="inputPassword1" required>
                            <div class="invalid-feedback">
                                密码不一致.
                            </div>
                        </div>
                    </div>
                    <div class="form-group row">
                        <div class="col-sm-4 offset-sm-1">
                            <button type="submit" id="register" class="btn btn-primary">注册</button>
                            <button type="reset" class="btn btn-primary">重置</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block beforebody %}
<!-- <script src="/static/app.js"></script> -->
<script src="static/js-sha1/sha1.js"></script>
<script>
    let form = document.querySelector('form.needs-validation')
    form && form.addEventListener('submit', function (event) {
        event.preventDefault();
        event.stopPropagation();
        if (form.checkValidity() === false) {
            form.classList.add('was-validated');
            return
        }
        if (form.password.value !== form.password1.value) {
            form.password1.classList.add('is-invalid')
            return
        } else {
            form.password1.classList.remove('is-invalid')
        }
        form.querySelectorAll('[name]').forEach(e => { e.classList.remove('is-invalid') })
        url = form.action
        axios.post(url, {
            name: form.name.value,
            email: form.email.value,
            password: sha1(form.name.value + ':' + sha1(form.password.value)).toString(),
        })
            .then(function (response) {
                // console.log(response);
                if (response.status === 200) {
                    let data = response.data
                    if (data['code'] === 0) {
                        console.log(data['msg'])
                        location.assign('/')
                    } else {
                        console.log(data['msg'])
                        let field = form[data['field']]
                        let feedback = field.parentNode.querySelector('.invalid-feedback')
                        feedback.innerText = data['msg']
                        field.classList.add('is-invalid')
                    }
                }
            })
            .catch(function (error) {
                console.log(error);
            });
    }, false);
</script>
{% endblock %}
